<template>
	<div class="cinema-detail">
		<div class="cinema-block">
			<div class="cinema-info">
				<div class="cinema-title ellipsis">{{ this.cinemaInfo.nm }}</div>
				<div class="cinema-addr ellipsis">{{ this.cinemaInfo.addr }}</div>

				<div class="location-icon">
					<img src="../assets/img/location.png" />
				</div>
			</div>
		</div>

		<swiper class="swiper" :options="swiperOption">
			<!-- <div class="bg-filter"></div> -->
			<template v-slot:container-start><span>Container start</span></template>

			<swiper-slide v-for="(item, index) in MovieList" :key="index" :data-id="index" ref="lis">
				<img :src="$options.filters.src(item.img)" />
				<div class="lazyload-wrapper">
					<div></div>
				</div>
			</swiper-slide>
			<!-- <div class="swiper-pagination" slot="pagination"></div> -->
		</swiper>

		<!-- <movie-show :movieshow="MovieList[0]"></movie-show> -->

		<!-- 超值套餐 -->
		<deal-list :dealList="dealList"></deal-list>
	</div>
</template>

<script>
	// import MovieShow from "@/components/MovieShow.vue";

	import {
		Swiper,
		SwiperSlide
	} from "vue-awesome-swiper";
	import "swiper/css/swiper.css";

	import DealList from "@/components/DealList.vue";

	export default {
		props: {
			cid: {
				String,
				Number
			},
		},
		data() {
			return {
				cinemaInfo: [],
				backChange: true,
				MovieList: [],
				MovieShow: [],
				dealList: [],

				swiperOption: {
					centeredSlides: true,
					slidesPerView: 4,
					spaceBetween: 30,
					pagination: {
						el: ".swiper-pagination",
						clickable: true,
					},
				},
			};
		},
		created() {
			this.getCinemaInfo();
			this.getMovieList();
			this.getDealList();
		},
		mounted() {
			console.log(this.$refs.lis);
		},
		methods: {
			async getCinemaInfo() {
				let res = await this.axios.get("cinema/detail?cinemaId=" + this.cid);
				// console.log(res);
				this.cinemaInfo = res;
			},
			async getMovieList() {
				let res = await this.axios.get(
					"cinema/shows?cinemaId=44&ci=20&channelId=4"
				);
				this.MovieList = res.movies;
				// console.log(this.MovieList);
			},
			async getDealList() {
				let res = await this.axios.get("cinema/queryDealList.json");
				// console.log(res);
				this.dealList = res.dealList;
				// console.log(this.dealList);
			},
		},
		components: {
			// MovieShow,
			Swiper,
			SwiperSlide,
			DealList,
		},
		filters: {
			src(value) {
				return value.replace("w.h", "170.230");
			},
		},
	};
</script>

<style lang="less" scoped>
	/deep/.swiper-slide {
		width: 65px;
		height: 95px;
		// margin-left: 15px;
		box-sizing: initial;
		z-index: 2;

		&>img {
			width: 100%;
			height: 100%;
		}
	}

	/deep/.swiper-wrapper {
		height: 95px !important;
	}

	/deep/.swiper-container {
		padding: 20px 15px 20px 5px;
		-webkit-transform: translateZ(0);
		transform: translateZ(0);

		// width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		// background-color: #40454d;
		background-color: rgb(248, 248, 248);

		// opacity: .9;
	}

	/deep/.swiper-slide-active {
		-webkit-transform: scale(1.15);
		transform: scale(1.15);
		border: 2px solid #fff;
	}

	.bg-filter {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		background-color: #40454d;
		opacity: 0.55;
	}

	.lazyload-wrapper {
		&::after {
			content: "";
			position: absolute;
			bottom: -6px;
			left: 50%;
			-webkit-transform: translateX(-50%);
			transform: translateX(-50%);
			width: 10px;
			height: 5px;
			background: url("../assets/img/lazyload-wrapper.png");
			background-size: contain;
		}
	}

	.cinema-block {
		background-color: #fff;
		margin-top: 50px;

		.cinema-info {
			position: relative;
			padding: 15px 100px 15px 15px;

			.ellipsis {
				text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap;
			}

			.cinema-title {
				font-size: 17px;
				line-height: 24px;
				font-weight: 700;
				color: #333;
			}

			.cinema-addr {
				margin-top: 2px;
				font-size: 13px;
				line-height: 18.5px;
				color: #999;
			}

			.location-icon {
				position: absolute;
				right: 0;
				top: 50%;
				width: 70px;
				height: 31px;
				-webkit-transform: translateY(-50%);
				transform: translateY(-50%);
				text-align: center;

				&>img {
					display: inline-block;
					width: 19px;
					height: 22px;
					margin-top: 5px;
				}

				&::after {
					position: absolute;
					top: 0;
					left: 0px;
					height: 100%;
					width: 1px;
					content: "";
					background: #d8d8d8;
					-webkit-transform: scaleX(0.5);
					transform: scaleX(0.5);
					-webkit-transform-origin: 0 0;
					transform-origin: 0 0;
				}
			}
		}
	}
</style>
